<script setup lang="ts">
import homeApi from '@/service/api/home'
import { useAppsStore } from '@/stores/modules/app'
defineOptions({
  name: 'Today'
})
const useStore = useAppsStore()
const { setLoginShow } = useStore
const { getUserInfo: userInfo } = storeToRefs(useStore)
const { width } = useWindowSize()

interface listItem {
  id: number
  cover: string
  name: string
  book_type: number
  photo_count: number
  video_count: number
}

const router = useRouter()
const handDetail = (e: listItem) => {
  if (!userInfo.value?.id) {
    setLoginShow(true)
    return
  }
  router.push({
    path: e.book_type === 1 ? '/mhdetail' : '/detail',
    query: {
      id: e.id
    }
  })
}
const tableList = ref<listItem[]>([])
const loading = ref(true)
const init = async () => {
  loading.value = true
  const { data } = await homeApi.today()
  tableList.value = data
  loading.value = false
}
init()

const cardImgInfo = computed(() => {
  let count = 8
  let pagePadding = 40 * 2
  let guide = (count - 1) * 20
  if (width.value <= 1300) {
    count = 6
    guide = (count - 1) * 10
  }
  if (width.value <= 800) {
    pagePadding = 10 * 2
    count = 2
    guide = (count - 1) * 10
  }
  const newHeight =
    Number(((width.value - guide - pagePadding) / count) * 1.4).toFixed(2) +
    'px'
  const newWidth =
    Number((width.value - guide - pagePadding) / count).toFixed(2) + 'px'
  return {
    width: newWidth,
    height: newHeight
  }
})

function IsPhone() {
  var info = navigator.userAgent
  return /mobile/i.test(info)
}
const isMoile = ref(IsPhone())
</script>

<template>
  <div class="today-page">
    <template v-if="tableList.length > 0">
      <div class="list">
        <div
          class="card"
          v-for="item in tableList"
          :key="item.id"
          @click="handDetail(item)"
        >
          <div class="cover">
            <n-image
              :width="cardImgInfo.width"
              :height="cardImgInfo.height"
              preview-disabled
              lazy
              bject-fit="cover"
              :src="$getImg(item.cover)"
              fallback-src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
            >
              <template #placeholder>
                <div
                  style="
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background-color: #fff;
                  "
                  :style="{
                    height: isMoile ? '180px' : '210px',
                    width: isMoile ? '143px' : '160px'
                  }"
                >
                  <img
                    :style="{
                      height: isMoile ? '143px' : '160px',
                      width: isMoile ? '143px' : '160px'
                    }"
                    style="object-fit: fill"
                    src="@/assets/images/loading.gif"
                    alt="加载中..."
                  />
                </div>
              </template>
            </n-image>
          </div>
          <div class="name u-line-1">{{ item.name }}</div>
          <div class="desc">
            <span>{{ item.photo_count }}图</span>
            <span v-if="item.video_count > 0" style="padding-left: 5px">
              {{ item.video_count }}视频
            </span>
          </div>
        </div>
      </div>
    </template>
    <template v-else-if="!loading">
      <div style="padding-top: 80px">
        <n-empty description="暂无数据">
          <template #icon>
            <n-icon>
              <i class="esayIcon esayIcon-fengche"></i>
            </n-icon>
          </template>
        </n-empty>
      </div>
    </template>
  </div>
</template>

<style scoped lang="scss">
.today-page {
  padding: 0 20px;
}
.list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  margin: 30px 0 0;
  gap: 20px;

  .card {
    width: 100%;
    cursor: pointer;
    border-radius: 5px;
    overflow: hidden;
    .cover {
      img {
        width: 100%;
        height: 280px;
        object-fit: cover;
        -webkit-user-drag: none;
        display: block;
        border-radius: 5px;
      }
    }
    .name {
      font-weight: 550;
      font-size: 17px;
      margin-top: 10px;
      color: #333;
    }
    .desc {
      margin-top: 0;
      color: #999;
      font-size: 14px;
    }
  }
}

@media (max-width: 1300px) {
  .list {
    gap: 20px 10px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    .card {
      width: 189px;
      .cover {
        img {
          height: 248px;
        }
      }
    }
  }
}

@media (max-width: 800px) {
  .today-page {
    padding: 0 10px;
  }
  .list {
    margin: 10px 0px 0 0px;
    grid-template-columns: 1fr 1fr;

    .card {
      width: 141px;

      .cover {
        img {
          height: 180px;
        }
      }

      .name {
        font-weight: 550;
        font-size: 12px;
        margin-top: 5px;
      }

      .desc {
        margin-top: 0;
        color: #999;
        font-size: 11px;
      }
    }
  }
}
</style>
